<template >
  <section>
  	<div class="span_title"> 高级搜索：</div>
    <el-form :inline='true' class="forms" label-position='right' label-width="auto">
    	
      <el-form-item
        class='forms_item'
        :label='item.label + ":"'
        v-for='item in formData'
        :key='item.label'
      >
      <!-- input -->
        <el-input
          v-if='item.type === "input"'
          v-model='item.modelData'
          type = ''
          placeholder='请输入'
          style='width : 160px'
          clearable
          size='mini'
        ></el-input>
        <!-- select -->
        <el-select
          size='mini'
          v-else-if='item.type === "select"'
          v-model='item.modelData'
          style='width : 160px'
          clearable
        >
          <el-option
            v-for='elem in item.options'
            :value='elem.code'
            :key='elem.code'
            :label='elem.label'
          ></el-option>
        </el-select>
        <!-- 日期 -->
        <el-date-picker
          v-else-if='item.type ==="date"'
          v-model="item.modelData"
          value-format='yyyy-MM-dd'
          align="right"
          type="date"
          size='mini'
          style='width:160px;'
          placeholder="选择日期"
          >
        </el-date-picker>
        <!-- 日期范围 -->
        <el-date-picker
         v-else-if="item.type === 'daterange'"
         v-model="item.modelData"
         size='mini'
         style='width:240px;'
         type="daterange"
         start-placeholder="开始日期"
         end-placeholder="结束日期"
         value-format='yyyy-MM-dd'
         >
       </el-date-picker>
      </el-form-item>
      <div class="button">
        <el-button
          type='info'
          size="small"
        >重置</el-button>
        <el-button
          type='primary'
          size="small"
        >查询</el-button>
      </div>
      <!-- <slot></slot> -->
    </el-form>
  </section>
</template>

<script>
export default {
  props : {
    formData : Array,
  },
  data(){
    return {
    }
  }
}
</script>

<style scoped="scoped">
  .forms {
    width: calc(100% - 70px);
    margin-left: 70px;
    padding: 0 12px;
  }
  .forms .forms_item {
      margin-bottom: 20px;
    }
  .button {
    width: 230px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
  }
  .button .el-button--small, .button .el-button--small.is-round{
  	width: 100px;
  }
  .span_title{
  	    display: inline-block;
    line-height: 39px;
    font-size: 14px;
    margin-right: 10px;
    width: 70px;
    float: left;
  }
</style>
